export const metadata = {
  title: 'Interactive Dots',
  description:
    'An interactive React component that adds a dynamic bubble effect, visually tracking cursor movement in real time.',
};

<ComponentCodePreview name='interactive-dots' type="separate" />

## Props

| Prop             | Type       | Default      | Description                                                                 |
| ---------------- | ---------- | ------------ | --------------------------------------------------------------------------- |
| `backgroundColor`| `string`   | `'#F0EEE6'`  | Background color of the canvas.                                             |
| `dotColor`       | `string`   | `'#666666'`  | Color of the dots.                                                          |
| `gridSpacing`    | `number`   | `30`         | Spacing between the dots in the grid.                                       |
| `animationSpeed` | `number`   | `0.005`      | Speed of the dot animation.                                                 |
| `removeWaveLine` | `boolean`  | `true`       | Whether to remove the animated wave line (if true, the wave is not shown). |
